<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
<script src="js/jquery.min.js"></script>
		<script src="./js/layui/layui.js"></script>
		<link rel="stylesheet" href="js/layui/css/layui.css" media="all"/>
		<style>
			html{
				width: 100%px;
				height: 100%px;
			}
			body{
				width: 100%px;
				height: 100%px;
			}
			.video{
			margin:0px;
			padding: 0px;
			width: 100%px;
			height: 500px;
			max-width: 800px;
			position: relative;
			}
			.video-item{
		width: 100%;
		height: 100%;
			}
		.contron{
			width: 100%;
			height: 40px;
			display: flex;
			position: absolute;
		}
		</style>
	</head>
	<body>
		
		<div class="video">
			<video src="./video/星际牛仔.mp4" class="video-item"></video>
			<div class="layui-progress layui-progress-big" lay-filter="demo" lay-showPercent="true">
			  <div class="layui-progress-bar" lay-percent="0%"></div>
			</div>
			<div class="contron">
			<button class="Fast-back">快退</button>
			<button class="play" value="播放">播放</button>
			<button class="Fast-forward" value="快进">快进</button>
			</div>
		</div>
		
		
		
		
		<script>
			//注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作				
			
			$(function(){
				layui.use('element', function(){
				  var element = layui.element;
				  
				  //播放与暂停
				  $(".play").click(function(){
				  	if($(".video-item").prop("paused")){
				  		$(".video-item")[0].play();
						ifended();
				  	}
				  	else{
				  		$(".video-item")[0].pause()
				  	}
				  })
				  //快进
				  $(".Fast-forward").click(function(){			  		
				  		var duration=$(".video-item").prop("duration");
				  		var currenttime=($(".video-item").prop("currentTime")+$(".video-item").prop("duration")*0.03);				  	
				  		var percentage=(currenttime/duration);
				  		console.log(percentage)
				  		$("video").prop("currentTime",currenttime);			  
				  	element.progress('demo', parseInt(percentage*100)+"%")
					$(".video-item")[0].play();
					ifended();
					
				  })
				  //快退
				  $(".Fast-back").click(function(){
				  		var duration=$(".video-item").prop("duration");
				  		var currenttime=($(".video-item").prop("currentTime")-$(".video-item").prop("duration")*0.03);				  	
				  		var percentage=(currenttime/duration);
				  		console.log(percentage)
				  		$("video").prop("currentTime",currenttime);			  
				  	element.progress('demo', parseInt(percentage*100)+"%")
				  					$(".video-item")[0].play();
				  					ifended();				  					
				  })
				  
				  //监听视频进度来动态响应进度条变化
				 function ifended(){
					 if($(".video-item").prop("paused")){
					 }else{
						 setTimeout(function(){
						 		if($("video").prop("ended")){													
						 				element.progress('demo',"100%")			 						  
						 					}
						 					else{
						 							var duration=$(".video-item").prop("duration");
						 							var currenttime=($(".video-item").prop("currentTime"));				  	
						 							var percentage=(currenttime/duration);
						 							console.log(percentage)	  
						 							element.progress('demo', parseInt(percentage*100)+"%")
						 							ifended()
						 					}
						 				},1000)
						 					 
					 }
					 			
				 }
				
				
				  
				  
				  
				  
				});
				
				
			})
			
		</script>
		<script>
		
		</script>
	</body>
</html>
